<!--
 * @Author: LAB
 * @Date: 2021-05-18 11:40:44
 * @Description: 药品基础信息
 * @FilePath: \HisDrugWeb\client-app\src\views\drug\components\drug-base.vue
-->
<template>
  <div>
    <CreateDrugPrescription
      v-model:value="isCreateDrugPrescription"
      @success="addSuccess"
    >
    </CreateDrugPrescription>
    <!-- :selectedA="ddd"
      @update:selectedA="saveSelectedA"
      v-model:selectedA="ddd" -->
    <CreateDrug
      v-model:value="isCreateDrug"
      v-model:drugId="editDrugId"
      @success="addSuccess"
    />
    <CreateDrugZh
      v-model:value="isCreateDrugZh"
      v-model:drugId="editDrugId"
      @success="addSuccess"
    />
    <CreateDrugTaboo
      v-model:value="isCreateDrugTaboo"
      :drugId="editDrugId"
      :drugType="drugType"
      :drugSchemeId="drugSchemeId"
    />
    <CreateDrugDosage
      v-model:value="isCreateDrugDosage"
      :drugId="editDrugId"
      :drugType="drugType"
      :drugSchemeId="drugSchemeId"
    />
    <DataGrid
      v-bind="DataGridSetting"
      :data-source="items"
      @context-menu-preparing="setRightMenu"
      :remote-operations="false"
      :selectedRowKeys="selectedRowKeys"
      @selectionChanged="selectionChanged"
    >
      <template #uploadImg="{ data: cellInfo }">
        <imageUpload
          :limit="1"
          :files="cellInfo.Value"
          @change="cellInfo.setValue"
        />
      </template>
      <template #headerTemplate="{ data: column }">
        <div class="header-input" style="width: 100%">
          <div
            style="width: 60%"
            v-if="!isEditHeader[column.columnIndex]"
            @dblclick="isEditHeader[column.columnIndex] = true"
            @click.stop="none"
          >
            {{ getHeaderTitle(column) }}
          </div>
          <DxTextBox
            @keydown.stop="none"
            @click.stop="none"
            v-else
            :placeholder="column.column.caption"
            :value="getHeaderTitle(column)"
            @focusOut="
              (event) => setHeader(event, column.column, column.columnIndex)
            "
            @enterKey="
              (event) => setHeader(event, column.column, column.columnIndex)
            "
          />
        </div>
      </template>
    </DataGrid>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import ImageUpload from "@/components/image-upload.vue";
import { ApiTool } from "@/api/api-tool";
import { Inject, Watch } from "vue-property-decorator";
import { OutPutDrugInfo } from "@/api/api_dictionaryclient";
import notify from "devextreme/ui/notify";
import { DxHtmlEditor } from "devextreme-vue/html-editor";
import Pagination from "@/framework/elementui/pagination.vue";
import DxTabs from "devextreme-vue/tabs";

import {
  DxDataGrid,
  DxColumn,
  DxPaging,
  DxEditing,
  DxLookup,
  DxForm,
  DxSearchPanel,
  DxExport,
  DxSorting,
  DxPager,
  DxRequiredRule,
  DxEmailRule,
  DxPatternRule,
  DxAsyncRule,
  DxSelection,
} from "devextreme-vue/data-grid";
import DataGrid from "@/framework/components/data-grid/data-grid.vue";
// import BaseDataGrid from "@/framework/components/data-grid/base-data-grid.vue";
import { DxPopup } from "devextreme-vue/popup";
import DxButton from "devextreme-vue/button";
import { SearchByURL } from "@/utils/search-byurl";
import { RouteLocation } from "vue-router";
import { PageInfo, Tool } from "@/utils/tool";
import { ApiExceptionShow } from "@/utils/api-exception-show";
import DxTextBox from "devextreme-vue/text-box";
import ThemeSwitch from "@/framework/theme-switch/theme-switch";
import { DictionaryFieldOutput } from "@/api/api_solutionclient";
import { CatalogClient } from "@/api/api_catalogclient";
import { ViewTool } from "@/framework/utils/view-tool";
import DxSortable from "devextreme-vue/sortable";
import LoadElement from "@/framework/utils/load-element";
import Tree from "@/framework/components/tree/tree.vue";
import { RightContextI } from "@/framework/components/right-menu/right-menu.vue";
// import CreateMiddle from "./create-middle.vue";
import { DrugClient } from "@/api/api_drugclient";
import DrugData from "@/data-source/drug";
import CreateDrug from "./create-drug.vue";
import CreateDrugTaboo from "./create-drug-taboo.vue";
import CreateDrugDosage from "./create-drug-dosage.vue";
import CreateDrugPrescription from "./create-drug-prescription.vue";
import CreateDrugZh from "./create-drugzh.vue";
import { dxDataGridOptions } from "devextreme/ui/data_grid";
import { IndexClient } from "@/api/api_indexclient";

const componentInfo = {
  title: "药品信息",
};
const dataSourceKey = "dictionaryId";
let formData: any = {};
let self: any;
const keyExpr = "drugId";
// 配置类型 1：金融中心产品轮播图 2：金融产品类型配置 3：还款方式 4 协议配置
const getDataGridSetting = function () {
  return {
    height: "calc(33vh - 90px)",
    width: "calc(100vw - 355px)",
    showBorders: true,
    showColumnLines: false,
    showRowLines: false,
    hoverStateEnabled: true,
    allowColumnResizing: true,
    allowColumnReordering: true,
    remoteOperations: false,
    // rowTemplate:"rowTemplate",
    sorting: {
      mode: "single",
    },
    selection: {
      mode: "single",
    },
    scrolling: {
      mode: "virtual",
      rowRenderingMode: "virtual",
    },
    paging: {
      pageSize: 5,
    },
    keyExpr,
    rowAlternationEnabled: true,
    noDataText: "暂无数据列表，请右键新增药品",
    onToolbarPreparing: (e) => {
      let toolbarItems = e.toolbarOptions.items;
      toolbarItems.length = 0;
    },
    columns: [],
    editing: {
      allowAdding: false,
      allowDeleting: false,
      allowUpdating: false,
      mode: "popup",
    },
    export: {
      enabled: true,
      allowExportSelectedData: true,
      fileName: componentInfo.title + new Date(),
    },
    onEditingStart(item) {
      formData = item.data;
    },
  } as dxDataGridOptions;
};

@Options({
  components: {
    DxDataGrid,
    DxColumn,
    DxPaging,
    DxEditing,
    DxPopup,
    DxLookup,
    DxForm,
    DxSearchPanel,
    DxExport,
    DxSorting,
    DxPager,
    DxRequiredRule,
    DxEmailRule,
    DxPatternRule,
    DxAsyncRule,
    DxSelection,
    ImageUpload,
    DxHtmlEditor,
    Pagination,
    DxTextBox,
    DxButton,
    DxSortable,
    Tree,
    DxTabs,
    CreateDrug,
    CreateDrugZh,
    CreateDrugTaboo,
    CreateDrugDosage,
    DataGrid,
    CreateDrugPrescription,
  },
})
export default class GrugBase extends Vue {
  columns = [
    {
      caption: "id",
      // fixed: true,
      allowEditing: false,
      allowSorting: false,
      width: 160,
    },
    {
      caption: "编码",
      dataField: "coding",
      width: 160,
      disabled: true,

      // fixed: true,
    },
    {
      caption: "名称",
      dataField: "name",
      width: 160,
      disabled: true,
    },
    {
      caption: "药品分类",
      dataField: "medicineType",
      width: 160,
    },
    {
      caption: "检码", ///
      dataField: "check",
      width: 160,
    },
    {
      caption: "英文名称",
      dataField: "englishName",
      width: 160,
    },
    {
      caption: "处方职务",
      dataField: "prescriptionPositionName",
      width: 160,
    },
    {
      caption: "医保职务",
      dataField: "medicalPositionName",
      width: 160,
    },
    {
      caption: "剂量单位",
      dataField: "dosageUnitName",
      width: 160,
    },
    {
      caption: "剂型",
      dataField: "dosageName",
      width: 160,
    },
    {
      caption: "处方药品",
      dataField: "drugDrugPrescriptionDrug",
      width: 160,
    },
    {
      caption: "处方限量",
      dataField: "drugDrugPrescriptionLimit",
      width: 160,
    },
    {
      caption: "过敏试验",
      dataField: "skinTestSort",
      width: 160,
    },
    {
      caption: "毒理",
      dataField: "isDangerName",
      width: 160,
    },
    {
      caption: "货源",
      dataField: "supplyName",
      width: 160,
    },
    {
      caption: "价值",
      dataField: "valueClassificationName",
      width: 160,
    },
    {
      caption: "梯次",
      dataField: "medicationEchelonName",
      width: 160,
    },
    {
      caption: "原料药",
      dataField: "medicalMaterialSortName",
      width: 160,
    },
    {
      caption: "急救药",
      dataField: "firstAidMedicine",
      width: 160,
      format: (row) => {
        return !row ? "否" : "是";
      },
    },
    {
      caption: "新药",
      dataField: "newDrug",
      width: 160,
      format: (row) => {
        return !row ? "否" : "是";
      },
    },
    {
      caption: "按药品下长期医嘱",
      dataField: "isLongMedicalAdvice",
      width: 160,
      format: (row) => {
        return !row ? "否" : "是";
      },
    },
    {
      caption: "适用性别",
      dataField: "sex",
      width: 160,
    },
    {
      caption: "ATC code",
      dataField: "atc",
      width: 160,
    },
    {
      caption: "溶媒药", ///
      dataField: "menstruum",
      width: 160,
    },
    {
      caption: "肿瘤药",
      dataField: "tumour",
      width: 160,
    },
    {
      caption: "抗菌药物",
      dataField: "antibacterialDrugsSortName",
      width: 160,
    },
    {
      caption: "给药途径",
      dataField: "meicalWay",
      width: 160,
    },
    {
      caption: "协定药",
      dataField: "agreementDrug",
      width: 160,
    },
  ];
  columnsZc = [
    {
      caption: "id",
      // fixed: true,
      allowEditing: false,
      allowSorting: false,
      width: 160,
    },
    {
      caption: "编码",
      dataField: "coding",
      width: 160,
      disabled: true,

      // fixed: true,
    },
    {
      caption: "名称",
      dataField: "name",
      width: 160,
      disabled: true,
    },
    {
      caption: "药品分类",
      dataField: "medicineType",
      width: 160,
    },
    {
      caption: "检码", ///
      dataField: "check",
      width: 160,
    },
    {
      caption: "英文名称",
      dataField: "englishName",
      width: 160,
    },
    {
      caption: "处方职务",
      dataField: "prescriptionPositionName",
      width: 160,
    },
    {
      caption: "医保职务",
      dataField: "medicalPositionName",
      width: 160,
    },
    {
      caption: "剂量单位",
      dataField: "dosageUnitName",
      width: 160,
    },
    {
      caption: "剂型",
      dataField: "dosageName",
      width: 160,
    },
    {
      caption: "处方药品",
      dataField: "drugDrugPrescriptionDrug",
      width: 160,
    },
    {
      caption: "处方限量",
      dataField: "drugDrugPrescriptionLimit",
      width: 160,
    },
    {
      caption: "过敏试验",
      dataField: "skinTestSort",
      width: 160,
    },
    {
      caption: "毒理",
      dataField: "isDangerName",
      width: 160,
    },
    {
      caption: "货源",
      dataField: "supplyName",
      width: 160,
    },
    {
      caption: "价值",
      dataField: "valueClassificationName",
      width: 160,
    },
    {
      caption: "梯次",
      dataField: "medicationEchelonName",
      width: 160,
    },
    {
      caption: "原料药",
      dataField: "medicalMaterialSortName",
      width: 160,
    },
    {
      caption: "急救药",
      dataField: "firstAidMedicine",
      width: 160,
      format: (row) => {
        return !row ? "否" : "是";
      },
    },
    {
      caption: "新药",
      dataField: "newDrug",
      width: 160,
      format: (row) => {
        return !row ? "否" : "是";
      },
    },
    {
      caption: "按药品下长期医嘱",
      dataField: "isLongMedicalAdvice",
      width: 160,
      format: (row) => {
        return !row ? "否" : "是";
      },
    },
    {
      caption: "适用性别",
      dataField: "sex",
      width: 160,
    },
    {
      caption: "ATC code",
      dataField: "atc",
      width: 160,
    },
    {
      caption: "溶媒药", ///
      dataField: "menstruum",
      width: 160,
    },
    {
      caption: "肿瘤药",
      dataField: "tumour",
      width: 160,
    },
    {
      caption: "抗菌药物",
      dataField: "antibacterialDrugsSortName",
      width: 160,
    },
    {
      caption: "给药途径",
      dataField: "meicalWay",
      width: 160,
    },
    {
      caption: "协定药",
      dataField: "agreementDrug",
      width: 160,
    },
  ];
  columnsZh = [
    {
      caption: "id",
      // fixed: true,
      allowEditing: false,
      allowSorting: false,
      width: 160,
    },
    {
      caption: "编码",
      dataField: "coding",
      width: 160,
      disabled: true,

      // fixed: true,
    },
    {
      caption: "名称",
      dataField: "name",
      width: 160,
      disabled: true,
    },
    {
      caption: "药品分类",
      dataField: "medicineType",
      width: 160,
    },
    {
      caption: "检码", ///
      dataField: "check",
      width: 160,
    },
    {
      caption: "英文名称",
      dataField: "englishName",
      width: 160,
    },
    {
      caption: "处方职务",
      dataField: "prescriptionPositionName",
      width: 160,
    },
    {
      caption: "医保职务",
      dataField: "medicalPositionName",
      width: 160,
    },
    {
      caption: "剂量单位",
      dataField: "dosageUnitName",
      width: 160,
    },
    {
      caption: "剂型",
      dataField: "dosageName",
      width: 160,
    },
    {
      caption: "处方药品",
      dataField: "drugDrugPrescriptionDrug",
      width: 160,
    },
    {
      caption: "处方限量",
      dataField: "drugDrugPrescriptionLimit",
      width: 160,
    },
    {
      caption: "过敏试验",
      dataField: "skinTestSort",
      width: 160,
    },
    {
      caption: "毒理",
      dataField: "isDangerName",
      width: 160,
    },
    {
      caption: "货源",
      dataField: "supplyName",
      width: 160,
    },
    {
      caption: "价值",
      dataField: "valueClassificationName",
      width: 160,
    },
    {
      caption: "梯次",
      dataField: "medicationEchelonName",
      width: 160,
    },
    {
      caption: "原料药",
      dataField: "medicalMaterialSortName",
      width: 160,
    },
    {
      caption: "单味药",
      dataField: "singleSubstance",
      width: 160,
    },
  ];
  @Inject()
  apiTool: ApiTool;
  importFile: any = {};
  formData: any = {
    page: {
      pageSize: 10,
    },
  };
  drugData: DrugData;
  items: OutPutDrugInfo[] = [];
  selectedRowKeys = [];
  // 目录id
  get drugSortId() {
    return (this.$route.query.drugSortId || "") as string;
  }
  // 方案id
  get drugSchemeId() {
    return (this.$route.query.drugSchemeId || "") as string;
  }
  // 父目录id
  get parentId() {
    return (this.$route.query.parentId || "") as string;
  }
  // 药品id
  get drugId() {
    return (this.$route.query.drugId || "") as string;
  }
  // 过滤编码
  get filterCoding() {
    return (this.$route.query.filterCoding || "") as string;
  }
  // 过滤名称
  get filterName() {
    return (this.$route.query.filterName || "") as string;
  }
  // 过滤简码
  get filterDrugShortCode() {
    return (this.$route.query.filterDrugShortCode || "") as string;
  }
  // 获取drugType
  get drugType() {
    return (this.$route.query.drugType || 0) as number;
  }
  DataGridSetting = getDataGridSetting.call(this);
  //columnsDefault = Object.assign([], this.DataGridSetting.columns);
  @Watch("drugType")
  getDrugType() {
    this.updateDrugType();
  }
  updateDrugType() {
    // this.DataGridSetting.columns = Object.assign([], this.columnsDefault)
    if (this.drugType == 1) {
      this.DataGridSetting.columns = Object.assign([], [], this.columns);
    } else if (this.drugType == 2) {
      this.DataGridSetting.columns = Object.assign([], [], this.columnsZc);
    } else if (this.drugType == 3) {
      this.DataGridSetting.columns = Object.assign([], [], this.columnsZh);
    }
  }
  pageInfo: PageInfo = {
    count: 0,
    pageSize: 10,
    index: 0,
  };
  searchByURL: SearchByURL;
  openTab = 0;
  isImport = false;
  solutionId = "";
  catalogId = "";
  catalogName = "";
  displayId = "";
  isEditHeader: Array<boolean> = [];
  headerNameList: Map<string, DictionaryFieldOutput> = new Map();
  @Inject()
  rightContextOption: RightContextI;
  isCreateDrug = false;
  isCreateDrugTaboo = false;
  isCreateDrugDosage = false;
  isCreateDrugZh = false;
  editDrugId = ""; // 编辑药品id
  rightMenu = [
    {
      text: "新增",
      id: "add",
    },
    {
      id: "edit",
      text: "修改",
    },
    {
      id: "remove",
      text: "删除",
    },
    {
      id: "setting",
      text: "设置",
      items: [
        {
          id: "dosage",
          text: "用法用量预设",
        },
        {
          id: "taboo",
          text: "配伍禁忌",
        },
        {
          id: "prescription",
          text: "对应处方",
        },
      ],
    },
    {
      id: "import",
      text: "导入",
    },
    {
      id: "enable",
      text: "启用",
    },
    {
      id: "disable",
      text: "禁用",
    },
    {
      text: "显示",
      id: "show",
      items: [
        {
          id: "showAbled",
          text: "启用",
          isCheckBox: true,
          value: true,
        },
        {
          id: "showDisabled",
          text: "停用",
          isCheckBox: true,
          value: false,
        },
      ],
    },
  ];
  // 底层参数变化
  get getlistParams() {
    return (
      this.drugSchemeId +
      this.parentId +
      this.drugSortId +
      this.filterCoding +
      this.filterName +
      this.filterDrugShortCode
    );
  }

  @Watch("getlistParams")
  watchQuery() {
    this.pageInfo.index = 0;
    this.pageInfo.count = 0;
    this.getList();
  }

  // 获取第一项数据
  getFirstItem(list: any[]) {
    return list[0];
  }
  // 从url上获取参数
  getUrlquery(newVal: any) {
    this.pageInfo.index = 0;
    this.isEditHeader = [];
    this.solutionId = (newVal.solutionId || "").toString();
    this.catalogId = (newVal.catalogId || "").toString();
    this.catalogName = Tool.convertToString(newVal["name"]);
    this.displayId = Tool.convertToString(newVal["displayId"]);
    this.pageInfo.index = Tool.convertToNumber((newVal.page || "").toString());
  }
  // // 拖动结束
  // onDragEnd(e) {
  //   // 无效拖动
  //   if (e.toData == "listData") {
  //     return;
  //   }
  //   let dataKey = "item";
  //   let fromIndex = e.itemElement.rowIndex;
  //   let toIndex = e.toIndex;
  //   let items = this.items;
  //   let fromItem = items[fromIndex];
  //   let treeNodes = LoadElement.selectElementAll(".tree-node-item");
  //   let toItem = JSON.parse(treeNodes[toIndex].dataset[dataKey]);
  //   let { catalogId } = toItem;
  //   // 无效拖动
  //   if (catalogId == fromItem.catalogId) {
  //     return;
  //   }
  //   let editItem = Object.assign(fromItem, { catalogId });
  //   // let client = this.apiTool.createClient(DictionaryClient);
  //   // this.editItem(editItem, client);
  // }
  setRightMenu(e) {
    this.rightContextOption.content = {
      event: e,
      id: "drugBase",
    };
    // 是否可修改
    let row = e.row;
    this.rightMenu[1]["disabled"] = !row;
    this.rightMenu[2]["disabled"] = !row;
    this.rightMenu[3]["disabled"] = !row;
    this.rightMenu[4]["disabled"] = true;
    this.rightMenu[5]["disabled"] = !row;
    this.rightMenu[6]["disabled"] = !row;
    this.rightContextOption.items = this.rightMenu;
  }

  rightClick(event: CustomEvent) {
    let { detail = {} } = event;
    let { itemData, content } = detail;
    if (content.id != "drugBase") {
      return;
    }
    let row: any;
    switch (itemData.id) {
      case "add":
        this.editDrugId = "";
        //this.isCreateDrug = true;
        if (this.drugType ==1 || this.drugType ==2) {
          this.isCreateDrug = true
        }else if (this.drugType ==3){
          this.isCreateDrugZh = true
        }
        break;
      case "edit":
        row = content.event.row;
        if (row && row.key) {
          this.editDrugId = row.key;
          this.isCreateDrug = true;
        }
        break;
      case "remove":
        row = content.event.row;
        console.log("row", row);
        this.drugData.delete(row.key).then(() => {
          this.getList();
        });
        break;
      case "taboo":
        row = content.event.row;
        if (row && row.key) {
          this.editDrugId = row.key;
          this.isCreateDrugTaboo = true;
        }
        break;
      case "dosage":
        row = content.event.row;
        if (row && row.key) {
          this.editDrugId = row.key;
          this.isCreateDrugDosage = true;
        }
        break;
      case "prescription":
        row = content.event.row;
        if (row && row.key) {
          this.editDrugId = row.key;
          this.isCreateDrugPrescription = true;
        }
        break;
      default:
        break;
    }
  }
  addSuccess() {
    this.getList();
  }
  beforeUnmount() {
    document.removeEventListener("rightContext", this.rightClick);
  }
  async mounted() {
    document.addEventListener("rightContext", this.rightClick);
    this.searchByURL = new SearchByURL(this.$router, 0);
    let client = this.apiTool.createClient(DrugClient);
    this.drugData = new DrugData(client, this);
    this.getList();
    this.updateDrugType();
  }

  async getList() {
    if (!this.drugSortId) {
      return;
    }
    let result = await this.drugData.getList({
      page: this.pageInfo,
      sortId: this.drugSortId,
      parentId: this.parentId,
      schemeId: this.drugSchemeId,
      passDrugName: this.filterName,
      passDrugCode: this.filterCoding,
      passDrugShortCode: this.filterDrugShortCode,
    });
    this.items = result.data;
    if (this.items.length > 0) {
      if (this.drugId) {
        // 选中回显
        this.selectedRowKeys = [this.drugId];
      } else {
        // 默认选中第一条
        let item = this.getFirstItem(this.items);
        let params: any = {};
        params[keyExpr] = item[keyExpr];
        params.drugType = item["drugSortType"];
        this.searchByURL.setParamsToUrl(params);
        this.selectedRowKeys = [item[keyExpr]];
      }
    } else {
      this.searchByURL.deletUrlParam(keyExpr, "drugType");
    }
    this.pageInfo.count = result.dataCount;
  }
  selectionChanged(e: {
    selectedRowsData: OutPutDrugInfo[];
    selectedRowKeys: string[];
  }) {
    let { selectedRowKeys, selectedRowsData } = e;
    if (selectedRowKeys.length > 0) {
      let params: any = {};
      params[keyExpr] = e.selectedRowKeys[0];
      params.drugType = selectedRowsData[0]["drugSortType"];
      this.searchByURL.setParamsToUrl(params);
    }
  }
  setPageToUtl() {
    this.searchByURL.setParamsToUrl({ page: this.pageInfo.index });
  }

  // 获取表格标题
  getHeaderTitle(column, headerNameList = this.headerNameList): string {
    let dataField = column.column.dataField.replace("v", "V");
    let caption = column.column.caption;
    let title = headerNameList.get(dataField);
    return title ? title.name : caption;
  }
  // 获取上传文件
  getFile(file) {
    this.importFile = file;
  }
  // 提交
  uploadXlsx() {
    let client = this.apiTool.createClient(CatalogClient);
    let catalogId = this.catalogId;
    let solutionId = this.solutionId;
    let tempFileInfo = this.importFile[0];
    if (!catalogId) {
      notify("请选择需要导入数据的目录");
      return;
    }
    ViewTool.showLoading(true, this);
    client
      .importCatalog({
        catalogId,
        solutionId,
        tempFileInfo,
      })
      .then((result) => {
        if (result.isSuccess) {
          notify("导入完成", "success", 2000);
          setTimeout(() => {
            this.refresh();
          }, 1000);
        } else {
          notify(result.message, "error", 2000);
        }
        ViewTool.showLoading(false, this);
      })
      .catch((e) => {
        notify("系统异常", "error", 2000);
        ViewTool.showLoading(false, this);
      });
  }
  // 页面刷新
  refresh() {
    this.$router.replace({ path: "/refresh" });
  }
  isAttr = false;
  eye() {
    this.isAttr = true;
    //console.log(this.DataGridSetting.columns);
  }
  isCreateDrugPrescription = false;
}
</script>

<style scoped lang="scss">
.grup-body {
  display: flex;
  justify-content: space-evenly;
}
.header-input {
  input {
    padding: 0 !important;
  }
}
</style>
